<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <el-row>
        <el-col :span="24">
            <div class="search-wrapper">
                <ul class="search-box">
                    <li><span class="filter-name">事件类别名称：</span>
                        <el-input v-model="listQuery.searchValue" suffix-icon="el-icon-search" size="small"
                                   style="width: 120px" />
                     </li>
                    <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;"
                                   round size="mini" type="primary" @click="getList()">搜索</el-button>
                    </li>
                </ul>
            </div>
        </el-col>
        </el-row>
        <!-- 按钮区 -->
        <el-row>
        <el-col :span="24">
            <div class="button-wrapper">
            <el-button size="mini" type="primary" round @click="dialogFormVisible=true">增加</el-button>
            <el-button size="mini" type="warning" round @click="batchEdit(9)">停用</el-button>
            <el-button size="mini" type="success" round @click="batchEdit(0)">启动</el-button>
            <el-button size="mini" type="danger"  round @click="batchEdit(-1)">删除</el-button>
            </div>

        </el-col>
        </el-row>
        <el-row>
        <el-col :span="24">
            <div class="data-wrapper">
        <template v-if="tableData!=null">
            <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                      tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" label="全选" width="55">
                </el-table-column>
                <el-table-column type="index" label="序号" :index="indexMethod">
                </el-table-column>
                <el-table-column prop="typeName" label="事件类别"  width="180">
                </el-table-column>
                <el-table-column prop="typeCode" label="类别编码" width="150" >
                </el-table-column>
                <el-table-column prop="typeNote" label="定义说明"  width="120">
                </el-table-column>
                <el-table-column prop="createUser" label="创建人"  width="120">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"  width="240">
                </el-table-column>
                <el-table-column prop="typeState" label="状态" :formatter="formatState">
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle
                                   @click="handleView(scope.$index, scope.row)"></el-button>
                        <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle
                                   @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle
                                   @click="delOne(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
            </div>
        </el-col>
        </el-row>
        <!-- 底部按钮和分页 -->
        <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
            <el-col :span="20">
                <div class="page-item">
                    <el-pagination background
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="listQuery.currentPage"
                                   :page-sizes="pageSizes"
                                   :page-size="listQuery.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="dataCount"/>
                </div>
            </el-col>
        </el-row>
        <!--↓单行弹出编辑菜单组件-->
        <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
            <el-form :model="oneCol" v-if="oneCol">
                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="事件类别名称" :label-width="formLabelWidth">
                            <el-input v-model="oneCol.typeName" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="定义说明" :label-width="formLabelWidth">
                            <el-input v-model="oneCol.typeNote" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialogFormVisible1 = false">取 消</el-button><!--重新隐藏弹出框-->
                <el-button size="medium" type="primary" @click="updateOne()">确 定</el-button><!--发送请求,记得隐藏框-->
            </div>
        </el-dialog>
        <!--↓这是插入功能的弹出框-->
        <el-dialog title="用户添加" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-row type="flex" justify="center">
                    <el-col :span="16">
                        <el-form-item label="事件类别编码" :label-width="formLabelWidth">
                            <el-input v-model="form.typeCode" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="16">
                        <el-form-item label="事件类别名称" :label-width="formLabelWidth">
                            <el-input v-model="form.typeName" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="16">
                        <el-form-item label="类型父级id" :label-width="formLabelWidth">
                            <el-select v-model="form.parentId" placeholder="请选择父级id"><!--把一级事件的ID当做自己的parentId-->
                                <el-option v-for="(item,index) in parentOptions" :key="index" :label="item.typeName" :value="item.typeId"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="center">
                    <el-col :span="16">
                        <el-form-item label="事件类型说明" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="form.typeNote" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCancel('form')">取 消</el-button>
                <el-button size="small" type="primary" @click="insert('form')">确 定</el-button>
            </div>
        </el-dialog>
        <!--查看按钮 -->
        <el-dialog title="查看" :visible.sync="dialogVisible">
            <el-form v-if="oneCol">
                <el-row :gutter="10">
                    <el-col :span="12">
                        创建人: {{oneCol.createUser}}
                    </el-col>
                    <el-col :span="12">
                        事件类型：{{oneCol.typeName}}
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="12">
                        事件信息：{{oneCol.typeNote}}
                    </el-col>
                    <el-col :span="12">
                        事件状态：{{oneCol.typeState}}
                    </el-col>
                </el-row>
            </el-form>

        </el-dialog>

   </div>
</template>
<script>
    export default {
        data(){


            return{

                tableData:null,//所有数据
                loading: false,//载入中显示flag
                currentPage:1,//当前页数
                pagesize:10,//分页数
                listSelect:[],//被选中的对象列表
                // searchInput:" ",//搜索框内容
                dataCount: 100,//默认数据总数,总条数
                pageSizes: [5, 10, 20, 30, 40],//选择每页数据量
                listQuery: {//查询条件
                    currentPage: 1,
                    pageSize: 5,
                    searchValue:''
                },
                parentOptions:[],//所有查出来的一级事件
                dataIndex:null,//,还没用上
                formLabelWidth: '100px',//弹出框样式属性
                dialogFormVisible1:false,//单行编辑的弹出框flag
                dialogVisible:false,//单行查看弹出框flag
                dialogFormVisible:false,//插入对象的弹出框flag
                oneCol:{//单行编辑的选中数据，初始值为当前行数据
                    typeName:{},//事件类别名称
                    typeNote:{},//定义说明
                    typeId:{},//重要！！当前行对象id，更新对象唯一条件
                    createUser:{},//事件创建人
                    typeState:{}//事件状态
                },
                form:{//插入功能的表单数据
                    // typeCode:'',//类别编码
                    // typeName:'',//事件类别名称
                    // typeNote:'',//定义说明
                    // parentId:'',//上级事件id
                },

                rules:{//插入功能效验啊
                        typeCode: [
                            { required: true, message: "请输入事件ID", trigger: "blur" }
                        ],
                        typeName: [
                            { required: true, message: "事件名称", trigger: "blur" },
                        ],
                        typeNote: [
                            { required: true, message: "请输入事件信息", trigger: "blur" },
                        ],


                }

            }
        },
        methods:{
            getList() {//请求数据库获取列表,条件在后
                this.postRequest('/api/rcs/eventTypeExample',this.listQuery).then((res)=>{
                    var data = res.data;
                    console.log(data)
                    if (data.status == 200) {
                        this.tableData = data.data;
                        this.dataCount = data.count;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                }).catch(error => {//错误信息
                        this.$message.error(error);

                    });
            },
            getParentId(){
                this.getRequest('/api/rcs/eventTypeFather').then((res)=>{//先写所有的以后会改
                    var data = res.data;
                    if (data.status == 200) {
                        console.log(data.data);
                        this.parentOptions=data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                }).catch(error => {//错误信息
                    this.$message.error(error);
                });
            },
            insert(form){//插入新对象提交
                this.$refs[form].validate(valid => {
                if (valid) {
                    this.postRequest("/api/rcs/eventTypeAdd", this.form)
                        .then(res => {
                            var data = res.data;
                            if (data.status == 200) {
                                this.$message.success(data.msg);
                                this.dialogFormVisible = false;
                                this.getList();
                                this.form = {};
                            } else {
                                this.$message.error(data.msg);
                            }
                        })
                        .catch(error => { //错误信息
                            this.$message.error("未插入成功，请检查数据");
                        });
            } else {
                this.$message.error("error submit!!");
                return false;
            }
        });

            },
                updateOne(){//单行编辑提交
                if(this.oneCol.typeNote&&this.oneCol.typeName){
                    console.log(this.oneCol);
                    //确认提交
                    this.postRequest("/api/rcs/eventTypeEdit",this.oneCol);
                    this.$message("修改成功");
                    this.dialogFormVisible1 = false;
                    //提交后隐藏弹出框
                }else{
                    alert("输入框为空");
                }
            },
            handleEdit(index, row){//单行编辑弹窗显示
                this.dialogFormVisible1=true;
                this.oneCol=row;
                this.oneCol.typeId=row.typeId;
                this.oneCol.typeName=row.typeName;
                this.oneCol.typeNote=row.typeNote;
            },
            handleView(index,row){//单行查看弹窗显示
              this.dialogVisible=true;
                this.oneCol=row;
                this.oneCol.typeId=row.typeId;//查看的时候要覆盖掉编辑下的属性
                this.oneCol.typeName=row.typeName;
                this.oneCol.typeNote=row.typeNote;
                this.oneCol.createUser=row.createUser;
                this.oneCol.typeState=row.typeState;
            },

            delOne(row,index){//单选删除的方法，注意这里会生成一个由选中对象的ID和状态码-1的对象，后台根据id找到目标的状态码修改
                this.$confirm("确认删除？").then(_ => {
                    this.deleteRequest("/api/rcs/eventTypeDelete", {
                        typeId: index.typeId,
                        typeState: -1
                    }).then((res) => {
                        var data = res.data;
                        this.$message.success("删除成功");
                        this.getList();
                        console.log("删除了" + res + "条数据");
                    }).catch((error) => {
                        console.log(error);
                        this.$message.error(error);
                        });
                }).catch(() => {
                    this.$message("取消删除");
                });
            },
            batchEdit(val){//批量编辑
                if(this.listSelect.length<=0){
                    this.$message.warning("请选择一条数据");
                    return;
                }
                var strArr=[];
                for(var i=0;i<this.listSelect.length;i++){
                    strArr.push(this.listSelect[i].typeId)
                }
                var submitData={//前面三个参数分别是 表名，状态字段名，id字段名
                    tableName:'e_event_type',
                    tableCol:'type_state',//status 为状态值 （0：正常  9：停用 -1：删除）
                    tableId:'type_id',
                    status:val,
                    ids:strArr//ids 为需要批量操作的 id数组
                }
                console.log(submitData);//确认操作
                this.$confirm("确认批量操作？").then(()=> {
                    this.putRequest("/api/common/batch", submitData)
                        .then(res => {
                            var data = res.data;
                            if (data.status == 200) {
                                this.$message.success(data.msg);
                                this.getList();
                            } else {
                                this.$message.error(data.msg);
                            }
                        }).catch(error => {
                            //错误信息
                            this.$message.error(data.msg);
                        });
                });
            },

            formatState: function(row, column) {//显示状态
                return row.typeState == 0 ? "启用" : "停用";
            },
            indexMethod(index) {//序号递增
                // return index+1;
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },

            handleSizeChange: function (size) {//每页个数改变
                // this.pagesize = size;
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.getList();
            },
            handleCurrentChange: function(currentPage){//得到当前
                // this.currentPage = currentPage;
                this.listQuery.currentPage = currentPage;
                this.dataIndex=this.listQuery.currentPage*this.listQuery.pageSize;
                this.getList();
            },
            //选中
            handleSelectionChange(val) {
                this.listSelect=val;
            },
            //新增框取消
            handleCancel(formName){
                this.dialogFormVisible = false
                this.editdialogForm = false
                this.$refs[formName].resetFields();
            },

        },
        created() {//构造时调用,向数据库请求设备列表
            this.getList();
            this.getParentId();
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>
<style scoped>

</style>